// pages/list_card/list_card.js
import * as echarts from '../../ec-canvas/echarts';
import * as util from '../../utils/util';
let previewChart = null;
let previewBigChart = null;
const labelOption = {
  normal: {
    show: true,
    rotate: 90,
    align: 'left',
    verticalAlign: 'middle',
    position: 'insideBottom',
    distance: 15
  }
}
const rotateOption = {
  normal: {
    show: true,
    align: 'left',
    verticalAlign: 'middle',
    position: 'insideBottom',
    distance: 10
  }
}
function initPreviewData(date) {
  wx.showLoading()
  let data = null
  let option = {}
  getApp().requestPost('turnover/get/cardsurveybysevendays/canteen/'+ getApp().globalData.companyId +'/date/' + date, function (res) {
    wx.hideLoading()
    data = res.data.data
    option = {
      // 关闭动画
      // animation: false,
      // color: ['#003366', '#006699', '#4cabce', '#e5323e'],
      legend: {
        data: ['充值金额', '补贴金额', '餐卡消费', '补贴消费']
      },
      xAxis: [
        {
          type: 'category',
          axisTick: { show: false },
          data: data.dateArray,
          axisLabel: {
            interval: 0,
            rotate: 40
          }
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '充值金额',
          type: 'bar',
          barGap: 0,
          // label: labelOption,
          data: data.firstOrdinateArray
        },
        {
          name: '补贴金额',
          type: 'bar',
          // label: labelOption,
          data: data.secondOrdinateArray
        },
        {
          name: '餐卡消费',
          type: 'bar',
          // label: labelOption,
          data: data.thirdOrdinateArray
        },
        {
          name: '补贴消费',
          type: 'bar',
          // label: labelOption,
          data: data.fourthOrdinateArray
        }
      ]
    }
    previewChart.setOption(option)
  })
}
function initBigPreviewData(date) {
  var xdata = ['一', '二', '三', '四', '五', '六', '七']
  xdata = xdata.reverse()
  return {
    // 关闭动画
    // animation: false,
    // color: ['#003366', '#006699', '#4cabce', '#e5323e'],
    legend: {
      data: ['充值金额', '补贴金额', '餐卡消费', '补贴消费']
    },
    yAxis: [
      {
        type: 'category',
        axisTick: { show: false },
        data: xdata
      }
    ],
    xAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '充值金额',
        type: 'bar',
        barGap: 0,
        label: rotateOption,
        data: [320, 332, 301, 334, 390, 180, 290]
      },
      {
        name: '补贴金额',
        type: 'bar',
        label: rotateOption,
        data: [220, 182, 191, 234, 290, 170, 260]
      },
      {
        name: '餐卡消费',
        type: 'bar',
        label: rotateOption,
        data: [150, 232, 201, 154, 190, 70, 160]
      },
      {
        name: '补贴消费',
        type: 'bar',
        label: rotateOption,
        data: [98, 77, 101, 99, 40, 80, 200]
      }
    ]
  }
}

Page({

  /**
   * 页面的初始数据
   */
  data: {
    //tab
    index: 0,
    date: util.formatTime(new Date()),
    tabs: ["日", "周", "月"],
    activeIndex: 0,
    sliderOffset: 0,
    sliderLeft: 0,
    //tab content
    dayData: null,
    weekData: null,
    monthData: null,
    //全屏图表显示
    showPreview: false,
    // 图表
    preview: {
      disableTouch: true,
      onInit: function (canvas, width, height) {
        previewChart = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        canvas.setChart(previewChart);
        initPreviewData(util.formatTime(new Date()))

        return previewChart;
      }
    },
    previewBig: {
      disableTouch: true,
      onInit: function (canvas, width, height) {
        previewBigChart = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        canvas.setChart(previewBigChart);
        previewBigChart.setOption(initBigPreviewData(util.formatTime(new Date())));

        return previewBigChart;
      }
    },
  },
  bindDateChange: function (e) {
    // console.log(e.detail.value)
    this.setData({
      date: e.detail.value
    })
  },
  togglePreview:function(){
    this.setData({
      showPreview: !this.data.showPreview
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //tab
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          sliderLeft: (res.windowWidth / that.data.tabs.length - sliderWidth) / 2,
          sliderOffset: res.windowWidth / that.data.tabs.length * that.data.activeIndex
        });
      }
    });
    //---tab
    wx.setNavigationBarTitle({ title: '卡务概况' })
    // wx.setNavigationBarColor({
    //   frontColor: '#fff',
    //   backgroundColor: '#fff',
    // })
  },
  onReady: function(){
    this.getTable(util.formatTime(new Date()))
  },
  getTable: function(date){
    wx.showLoading()
    let app = getApp()
    let _self = this
    let dayurl = 'cardsurvey/get/getallcardservicedatawithday/canteen/' + app.globalData.companyId + '/date/' + this.data.date
    let weekurl = 'cardsurvey/get/getallcardservicedatawithweek/canteen/' + app.globalData.companyId + '/date/' + this.data.date
    let monthurl = 'cardsurvey/get/getallcardservicedatawithmonth/canteen/' + app.globalData.companyId + '/date/' + this.data.date
    app.requestPost(dayurl, function(res){
      console.log(res.data)
      _self.setData({
        dayData: res.data.data
      })
      app.requestPost(weekurl, function (res) {
        console.log(res.data)
        _self.setData({
          weekData: res.data.data
        })
        app.requestPost(monthurl, function (res) {
          wx.hideLoading()
          console.log(res.data)
          _self.setData({
            monthData: res.data.data
          })
        })
      })
    })
  },
  resetData: function(){    
    initPreviewData(this.data.date)
    this.getTable(this.data.date)
  },
  //tab change
  tabClick: function (e) {
    this.setData({
      sliderOffset: e.currentTarget.offsetLeft,
      activeIndex: e.currentTarget.id
    });
  },
})

  /**
   * tab选项
   */
var sliderWidth = 130; // 需要设置slider的宽度，用于计算中间位置
